<template>
	<div class="count-chart-box">
		<div id="countChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";
import { zjys_finish_month } from "../service";
// 月份
// let timeArr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
let timeArr = ref([]);
//计划数据
let dataArr1 = ref([
	//   2000, 5500, 8400, 4400, 5500, 7700, 8900, 1200, 2200, 3300, 8800, 4500,
]);
// 实际数据
let dataArr2 = ref([
	//   2500, 5000, 6000, 6000, 5200, 7100, 1000, 1800, 2900, 1500, 5500, 7800,
]);

let options = reactive({
	legend: {
		// 图例组件
		textStyle: {
			color: "#D3E3FF",
		},
		data: [
			{
				name: "计划",
				icon: "circle",
				itemStyle: {
					color: "#36E3E3",
				},
			},
			{
				name: "实际",
				icon: "circle",
				itemStyle: {
					color: "#28A0E9",
				},
			},
		],
	},
	grid: {
		right: "15%",
		bottom: "10%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
		className: "tooltipBox",
		backgroundColor: "transparent",
		textStyle: {
			color: "#ffffff",
			textShadowColor: "#000000",
			textShadowOffsetY: 2,
			textShadowBlur: 4,
		},
		padding: [0, 15, 30, 15],
		borderWidth: 0,
		formatter: (params) => {
			let res = "";
			for (let i = 0; i < params.length; i++) {
				res += `<br /><span>${params[i].seriesName}：</span><span style="color:#FFDA3A">${params[i].value}</span>`;
			}
			return res;
		},
	},
	xAxis: {
		type: "category",
		data: timeArr.value,
		name: "单位（月）",
		nameTextStyle: {
			color: "#D3E3FF",
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.6)",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
				},
			},
		},
	],
	series: [
		{
			type: "line",
			name: "计划",
			smooth: true,
			data: dataArr1.value,
			showSymbol: false,
			lineStyle: {
				color: "#36E3E3",
			},
			areaStyle: {
				color: "rgba(0,213,255,0.2)",
			},
		},
		{
			type: "line",
			name: "实际",
			smooth: true,
			data: dataArr2.value,
			showSymbol: false,
			lineStyle: {
				color: "#28A0E9",
			},
			areaStyle: {
				color: "rgba(0,213,255,0.2)",
			},
		},
	],
});

let countChartRef = null;
let initCountChartData = (params) => {
	zjys_finish_month(params)
		.then((resp = []) => {
			const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
			const data1 = new Array(12).fill("0.00");
			const data2 = new Array(12).fill("0.00");
			resp.map((item) => {
				const { budget = 0, month, practical = 0 } = item;
				data1[month - 1] = changeNumToWan(budget);
				data2[month - 1] = changeNumToWan(practical);
				// months.push(month);
				// data1.push(changeNumToWan(budget));
				// data2.push(changeNumToWan(practical));
			});
			dataArr2.value.splice(0);
			dataArr2.value.push(...data2);

			dataArr1.value.splice(0);
			dataArr1.value.push(...data1);

			timeArr.value.splice(0);
			timeArr.value.push(...months);
			countChartRef.setOption(options);
		})
		.catch((e) => {});
};
const initCountChart = (params) => {
	if (countChartRef == null)
		countChartRef = echarts.init(document.getElementById("countChart"));
	initCountChartData(params);
};
defineExpose({
	initCountChart,
});
</script>
<style lang="scss" scoped>
.count-chart-box {
	width: 100%;
	height: 100%;
	#countChart {
		width: 100%;
		height: 100%;
	}
}
:deep(.tooltipBox) {
	background: url("@/assets/screenImg/financeImg/tooltipBg.png") no-repeat;
	background-size: 100% 100%;
}
</style>
